<script setup>
import counter from "../UI/counter.vue";
const props = defineProps(["hamburgerMessage", "desc"]);
</script>

<template>
  <div class="goods">
    <div class="img">
      <img
        :src="props.hamburgerMessage.img"
        :alt="props.hamburgerMessage.title"
      />
    </div>
    <div class="info">
      <div class="desc">
        <h2>{{ props.hamburgerMessage.title }}</h2>
        <p v-show="desc">{{ props.hamburgerMessage.desc }}</p>
      </div>
      <div class="price-btn">
        <span class="price">{{ props.hamburgerMessage.price }}</span>
        <counter :hamburger="props.hamburgerMessage"></counter>
      </div>
    </div>
  </div>
</template>

<style scoped>
.goods {
  display: flex;
  align-items: center;
  padding: 0 20rem;
  height: 280rem;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
}
.img {
  width: 200rem;
}
.info {
  width: 450rem;
  margin-left: 20rem;
}
.info h2 {
  color: #000000;
  font-size: 30rem;
  font-weight: bold;
}
.info p {
  color: #888;
  font-size: 23rem;
  margin-top: 8rem;
}
.price-btn {
  display: flex;
  justify-content: space-between;
  margin-top: 40rem;
}
.price {
  font-size: 30rem;
  font-weight: bold;
}
.price::before {
  content: "￥";
}
</style>
